<template>
	<div class="app-container">
		<el-row>
			<explain :data="explain"></explain>
		</el-row>
		<el-row>
			<el-tree ref="tree" :data="menuList" show-checkbox node-key="id" :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick">
			</el-tree>
		</el-row>
		<el-row>
			<el-button type="primary" @click="addAuthor">新建</el-button>
			<el-button type="danger" @click="deletAuthor">删除</el-button>
		</el-row>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			<el-form :model="authorForm" label-width="110px" size="mini" :rules="rules" ref="dataForm" :label-position="labelPosition" style='width: 400px; margin-left:50px;'>
				<el-form-item label="选择父级权限" prop="authorParent" v-if="dialogStatus === 'create'">
					<el-input auto-complete="off" v-model="authorForm.authorParent" :readonly="true" placeholder="请选择父级权限" @focus="showTree"></el-input>
					<el-tree style="max-height:200px;overflow-y: scroll;" v-if="isshowTree" :data="parentList" node-key="id" :expand-on-click-node="false" @node-click="choseParentId" :props="defaultProps">
					</el-tree>
				</el-form-item>
				<el-form-item label="权限名称" prop="name">
					<el-input v-model="authorForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="权限标题" prop="title">
					<el-input v-model="authorForm.title" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="权限地址" prop="path">
					<el-input v-model="authorForm.path" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="权限组件" prop="component">
					<el-input v-model="authorForm.component" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="权限图标">
					<el-input v-model="authorForm.icon" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="显示排序">
					<el-input v-model="authorForm.sort" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createData" v-if="dialogStatus === 'create'">确 定</el-button>
				<el-button type="primary" @click="updateData" v-else>确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { changeList, removeList, getList } from '@/api/admin'
	import explain from '@/components/Explain'
	export default {
		name: 'authority',
		components: {
			explain
		},
		data() {
			return {
				explain: [
					"1.点击类名可以进入详情页面进行修改",
					"2.勾选多个复选框，再点击下方的按钮可进行批量操作"
				],
				isshowTree: false,
				menuList: [],
				parentList: [],
				defaultProps: {
					label: "title",
					children: "children",
				},
				labelPosition: 'right',
				authorForm: {
					name: "",
					title: "",
					path: "",
					component: "",
					sort: "",
					icon: "",
					authorParent: "",
					parentId:0
				},
				dialogFormVisible: false,
				dialogStatus: "", //控制弹窗是修改还是新增
				textMap: {
					update: '修改权限',
					create: '添加权限'
				},
				rules: {
					authorParent: [{
						
						message: '请选择父级权限',
						
					}],
					name: [{
						required: true,
						message: '请输入权限名称',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: '请输入权限标题',
						trigger: 'blur'
					}],
					path: [{
						required: true,
						message: '请输入权限地址',
						trigger: 'blur'
					}],
					component: [{
						required: true,
						message: '请输入权限组件',
						trigger: 'blur'
					}]

				}
			}
		},
		created() {
			this.getList();
		},
		methods: {
			showTree() {
				this.isshowTree = true;
			},
			choseParentId(data) {
				this.authorForm["parentId"] = data.id;
				this.authorForm.authorParent = data.title;
				this.isshowTree = false;
			},
			getList() {
				let that = this;
				getList().then((res) => {
					that.menuList = [...res.entity];
					that.parentList = [...res.entity];
					that.parentList.unshift({
						title: "根目录",
						id: 0
					});
				});
			},
			resetTemp() { //清除表单数据
				this.authorForm = {
					name: "",
					title: "",
					path: "",
					component: "",
					sort: "",
					icon: ""
				};
				delete this.authorForm["id"];
			},
			addAuthor() {
				this.dialogStatus = "create";
				this.resetTemp();
				this.dialogFormVisible = true;
			},
			deletAuthor() {
				let that = this;
				let removeIdArry = this.$refs.tree.getCheckedKeys(true);
				if(removeIdArry.length > 0) {
					this.$confirm('是否确定删除权限？ 删除之后将无法恢复！', '提示', {
						confirmButtonText: '确定删除',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						removeList(removeIdArry).then((res) => {
							that.getList();
							that.$notify({
								title: '成功',
								message: '删除成功',
								type: 'success',
								duration: 2000
							});
						});
					})
				}

			},
			handleNodeClick(data) {
				this.dialogStatus = "update";
				delete this.authorForm["authorParent"];
				delete this.authorForm["parentId"];
				this.authorForm.name = data.name;
				this.authorForm.title = data.title;
				this.authorForm.path = data.path;
				this.authorForm.component = data.component;
				this.authorForm.sort = data.sort;
				this.authorForm.icon = data.icon;
				this.authorForm["id"] = data.id;
				this.dialogFormVisible = true;
			},
			addAndChange(text){
				let that = this;
				let FormData = this.authorForm;
				this.$refs['dataForm'].validate((valid) => {
					if(valid) {
						delete this.authorForm["authorParent"];
						changeList(FormData).then((res) => {
							that.getList();
							that.dialogFormVisible = false
							that.$notify({
								title: '成功',
								message: text+'成功',
								type: 'success',
								duration: 2000
							});

						})
					}

				});
			},
			createData(data) {
				this.addAndChange("添加");

			},
			updateData(data) {
				this.addAndChange("更新");
			}

		}
	}
</script>

<style>
	
</style>